<template>
  <van-popup
    teleport="body"
    :lazy-render="false"
    v-model:show="show"
    class="p-4"
    round
    @click-overlay="closeModal"
  >
    <div class="text-center font-bold mb-2">修改配置</div>
    <div class="">
      <KSelect
        v-if="codeInfo?.IntraCity === '1'"
        ref="location"
        @change="changeCity"
        :data="formRef"
      />

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.maxMoneyDescribe }}</div>
        <template #reference>
          <div class="flex text-sm my-2" v-if="codeInfo?.maxMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单笔最大金额：
            </div>
            <input
              class="border box-border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.maxMoneyDescribe"
              type="text"
              v-model="formRef.maxMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.minMoneyDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.minMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单笔最小金额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.minMoneyDescribe"
              type="text"
              v-model="formRef.minMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.limitMoneyDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.limitMoneyStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              单日限额金额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.limitMoneyDescribe"
              type="text"
              v-model="formRef.limitMoney"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.limitNumberDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.limitNumberStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              收款笔数：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.limitNumberDescribe"
              type="text"
              v-model="formRef.limitNumber"
              required
            />
          </div>
        </template>
      </van-popover>

      <van-popover>
        <div class="p-2 text-sm text-gray-500">{{ codeInfo?.regularNumberDescribe }}</div>
        <template #reference>
          <div class="flex my-2 text-sm" v-if="codeInfo?.regularNumberStatus == '1'">
            <div
              class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded"
            >
              收款固额：
            </div>
            <input
              class="border p-2 border-black ml-1 rounded placeholder:text-sm"
              :placeholder="codeInfo?.regularNumberDescribe"
              type="text"
              v-model="formRef.regularNumber"
              required
            />
          </div>
        </template>
      </van-popover>

      <div class="flex my-2 text-sm" v-show="codeInfo?.analysisStatus == '1'">
        <div class="border flex-1 text-center border-white bg-red-600 text-white py-2 px-1 rounded">
          二维码配置：
        </div>
        <input
          class="border p-2 border-black ml-1 rounded placeholder:text-sm"
          type="text"
          v-model="formRef.analysisSrc"
          required
        />
      </div>
    </div>

    <div class="m-2 flex justify-center">
      <button @click="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        确认配置
      </button>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { EditCollectionApi, GetCollectionCodeApi } from '@/apis/collection'
import { showToast } from 'vant'
import KSelect from '@/components/KSelect.vue'

const emit = defineEmits(['update:show-modal'])
const formRef = ref({
  code: '',
  maxMoney: 0,
  minMoney: 0,
  limitMoney: 0,
  limitNumber: 0,
  regularNumber: 0,
  agentImgTitle: '',
  agentImgSrc: '',
  province: '',
  city: '',
  input: [],
  status: 1,
  analysisSrc: ''
})
const codeInfo = ref({
  IntraCity: '',
  maxMoneyStatus: '',
  minMoneyStatus: '',
  limitMoneyStatus: '',
  limitNumberStatus: '',
  regularNumberStatus: '',
  analysisStatus: ''
})

const location = ref()

const props = defineProps({
  info: {
    type: Object,
    defaule: () => {}
  },
  showModal: {
    type: Boolean,
    default: false
  }
})

onMounted(async () => {
  formRef.value = props?.info
  codeInfo.value = await GetCollectionCodeApi({ code: props?.info.code })
})

// watch(
//   () => props.info,
//   async () => {
//     formRef.value = props?.info
//     codeInfo.value = await GetCollectionCodeApi({ code: props?.info.code })
//   }
// )

function changeCity(item) {
  formRef.value.province = item.province
  formRef.value.city = item.city
}

function showEditModal(item) {
  formRef.value = item
  GetCollectionCodeApi({ code: item.code }).then((res) => {
    codeInfo.value = res

    show.value = true
  })
}

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})

function submit() {
  EditCollectionApi({ id: props.id, ...formRef.value }).then(() => {
    showToast({
      message: '修改成功',
      duration: 1000,
      onClose() {
        show.value = false
      }
    })
  })
}

function closeModal() {
  show.value = false
}

defineExpose({ showEditModal })
</script>
<style scoped>
:deep(.van-popover__wrapper) {
  display: block;
}
</style>
